<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地名称</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" nzLabel="{{item.storeName}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">用户昵称</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <input type="text" nz-input formControlName="nickName" placeholder="请输入用户昵称"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">手机号码</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input type="text" id="keyword" nz-input formControlName="keyword" placeholder="手机号码"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">会员ID</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input type="text" id="memberId" nz-input formControlName="memberId" placeholder="请输入会员ID"/>
        </nz-form-control>
      </nz-form-item>
    </div>


    <div class="item margin-bottom" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6"
         [ngClass]="isMobile? '': 'padding-left'" style="text-align: right">
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                    nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                           nzTheme="outline"></i>查询
      </button>
    </div>
  </div>
</form>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">



  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th nzLeft>会员ID</th>
      <th>用户</th>
      <th>来源场地</th>
      <th>运营商</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">合作伙伴</th>
      <th>累计充值</th>
      <th>余币</th>
      <th>余额</th>
      <th>积分</th>
      <th>彩票</th>
      <th>套票</th>
      <th>最近游戏时间</th>
      <!--      <th>操作</th>-->
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzEllipsis nzLeft>{{ data.id }}</td>
        <td nzEllipsis>
          <div class="user-info">
            <div class="margin-right"><img class="image" [src]="data.headImgUrl" width="50px" height="50px"></div>
            <div>
              <div>
                <div>
                  <span>{{ data.nickName }}</span>
                </div>
                <div>{{data.mobile}}</div>
              </div>
              <div>
                {{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}
              </div>
            </div>
          </div>

        </td>

        <td nzEllipsis>{{ data.storeName }}</td>
        <td nzEllipsis>
          <a (click)="skipMerchant(data)" *ngIf="data.username">
            <div>{{data.username}}</div>
            <div class="text-sm text-grey">{{data.name}}</div>
          </a>
          <span *ngIf="!data.username"> <nz-tag nzColor="success">微信一键登录</nz-tag></span>
        </td>
        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
          <a (click)="skipAgency(data)">
            <div>{{ data.agencyName }}</div>
            <div class="text-sm text-grey">{{ data.agencyNo}}</div>
          </a>
        </td>
        <td nzEllipsis>{{ data.totalPay }}</td>
        <td nzEllipsis>
         <div> {{ data.rechargeBalance + data.donateBalance }}</div>
          <div class="temporary-currency" *ngIf="data.temporaryCurrencyList.length>0">
            <div>其中</div>
            <div *ngFor="let data2 of data.temporaryCurrencyList let index2 = index">
              {{data2.type==1?'充值币':'赠送币'}}
              {{data2.balance}}
              将于
              {{ data2.expiration | date: 'yyyy-MM-dd HH:mm:ss'}}
              过期
              {{index2+1!=data.temporaryCurrencyList.length?'，':'。'}}
            </div>
          </div>
        </td>
        <td nzEllipsis>{{ data.moneyRechargeBalance + data.moneyDonateBalance}}</td>
        <td nzEllipsis>{{ data.integral }}</td>
        <td nzEllipsis>{{ data.lottery }}</td>
        <td nzEllipsis><a (click)="showTicketsModel(data)">{{ data.noUseTickets }}</a></td>
        <td nzEllipsis>{{ data.latelyPay | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
        <!--        <td nzEllipsis>-->
        <!--          <a>详情</a>-->
        <!--          <nz-divider nzType="vertical"></nz-divider>-->
        <!--          <a>禁用</a>-->
        <!--        </td>-->
      </tr>

    </ng-container>
    </tbody>
    <nz-modal [(nzVisible)]="showTickets" nzTitle="套票详情" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="900px">
        <nz-table #nzTable [nzData]="listTickData" nzTableLayout="fixed" [nzScroll]="{ x: 'auto' }">
          <thead>
          <tr>
            <th nzLeft>id/编号</th>
            <th style="width: 160px">购买时间</th>
            <th style="width: 160px">到期时间</th>
            <th style="width: 160px">套票名称</th>
            <th>总次数</th>
            <th>剩余次数</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <ng-container *ngFor="let data2 of listTickData">
          <tr >
            <td nzLeft nzEllipsis>{{data2.id}}</td>
            <td nzEllipsis>{{data2.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
            <td nzEllipsis>{{data2.specifyDueTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
            <td nzEllipsis>{{data2.commodityName}}</td>

            <td nzEllipsis>
              <div *ngIf="data2.numberOfPlay > 0">
                {{data2.numberOfPlay}}
              </div>

              <div *ngIf="data2.numberOfPlay == -1">
                无限制
              </div>
            </td>
            <td nzEllipsis>
              <div *ngIf="data2.totalNumberOfPlay > 0">
                {{data2.totalNumberOfPlay}}
              </div>
              <div  *ngIf="data2.numberOfPlay == -1">
                无限制
              </div>
            </td>
            <td nzEllipsis>
              <div style="color: red" *ngIf="data2.haveExpired">到期</div>
              <div style="color: green" *ngIf="!data2.haveExpired">可用</div>
            </td>
            <td nzEllipsis>
                <a (click)="onClickTick(data2)">查看</a>
            </td>
          </tr>
          </ng-container>
          </tbody>
        </nz-table>

    </nz-modal>
  </nz-table>
</div>
